@extends('layouts.app')
@section('content')
    <link href="{{ asset('static/css/home/login.css') }}" rel="stylesheet">

    <div class="container">
        <div class="layadmin-user-login layadmin-user-display-show main">
            <div class="layui-main auth-register">
                <div class="layadmin-user-login-main login">
                    <div class="layadmin-user-login-box layadmin-user-login-header"
                         style="margin-top: 10px;margin-bottom: 10px">
                        <div class="layui-row">
                            <div class="layui-col-xs6">
                                <a href="{{url('login')}}" style="padding:5px 15px;cursor:pointer;font-size: 20px;color:#999;font-weight: 700">登陆</a>
                            </div>
                            <div class="layui-col-xs6">
                                <a style="padding:5px 15px;cursor:pointer;font-size: 20px;color:#108ADA;font-weight: 700">注册</a>
                            </div>
                        </div>
                    </div>
                    <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                        <form class="layui-form" action=""  id="register" method="POST">
                            <div class="layui-form-item ">
                                <input type="text" name="mobile" id="mobile" placeholder="手机" class="layui-input border" autocomplete="off"
                                       value="{{ old('mobile') }}">
                                <span class="error_mobile">{{ $errors->first('mobile') }}</span>
                            </div>
                            <div class="layui-form-item">
                                <input type="hidden" name="_token" value="{{csrf_token()}}">
                                <input type="password" name="password" placeholder="密码" class="layui-input"
                                       value="{{ old('password') }}">
                                <span class="error_password">{{ $errors->first('password') }}</span>
                            </div>
                            <style>
                                .layui-btn[disabled]{
                                    background-color: #888 !important;
                                    cursor: not-allowed;
                                }
                            </style>
                            <div class="layui-form-item">
                                <div class="layui-row">
                                    <div class="layui-col-xs7">
                                        <input type="text" name="code" placeholder="验证码" class="layui-input" value="{{ old('code') }}" >
                                        <span class="error_password">{{ $errors->first('code') }}</span>
                                    </div>
                                    <div class="layui-col-xs5">
                                        <div style="margin-left: 10px;">
                                            <button type="button" class="code layui-btn layui-btn-fluid refresh-code" >
                                                获取验证码
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <input type="checkbox" style="color: #333" name="check" lay-skin="primary"
                                       lay-verify="required"
                                       title="" checked="">

                                {{--<a class="change" style="padding-top: 10px" href="{{url('auth/register')}}">《519消防网络协议》</a>--}}
                                <div class="" style="position:relative;float: right;margin-top: 10px;margin-right: 175px">
                                    <span style="color: #666">我接受</span><a class="change" style="color: #108ADA" href="{{url('register')}}">《用户协议》</a>
                                </div>
                            </div>
                            {{--<div class="layui-form-item" style="padding: 0 15px">--}}
                            {{--<button class="layui-btn layui-btn-primary" style="background: #108ADA;border: 0">个人注册</button>--}}
                            {{--<button class="layui-btn " style="float: right;background: #108ADA;border: 0">企业注册</button>--}}
                            {{--</div>--}}
                            <div class="layui-form-item">
                                <button type="submit" class="layui-btn layui-btn-fluid submit"
                                        style="background: #108ADA;border: 0">同意协议并提交
                                </button>
                            </div>
                        </form>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <script type="application/javascript" src="static/plugins/layui/layui.js?v=<?php echo time()?>"></script>
    <script>
        layui.use(['jquery', 'form'], function () {
            let isTimer = false;
            let form = layui.form();
            let layer = layui.layer;
            let $ = layui.jquery;
            form.on('submit(demo1)', function (data) {
                let field = data.field;
                if (field.check != 'on') {
                    layer.msg('请查看并勾选《519消防网络协议》');
                    return false;
                }
                $('#register').submit();
                return false;
            });
            $('.refresh-code').click(function () {
                if (isTimer) {
                    return false;
                }
                $.ajax({
                    url: "/common/send", dataType:'json',data: {mobile: $('#mobile').val()}, async: false, success: function (res) {
                        if(res.status == 0){
                            timer(60);
                        }else{
                            layer.msg(res.msg);
                        }

                    }
                });
            });

            $('.change').click(function (e) {
                let parent = $(this).parents('.layui-main');
                let login = parent.hasClass('auth-login');
                if (login) {
                    $('.auth-register').show();
                    $('.auth-login').hide();
                } else {
                    $('.auth-register').hide();
                    $('.auth-login').show();
                }

            });

            //注册登录切换
            function timer(intDiff = 60) {
                let refresh = $('.refresh-code');
                let i = window.setInterval(function () {
                    isTimer = true;
                    console.log('当前的倒计时:' + intDiff);
                    if (intDiff > 0) {
                        --intDiff;
                        refresh.css('background', '#fff');
                        refresh.css('color', '#000');
                        refresh.html( '重新发送('+intDiff + 's)');
                    } else {
                        refresh.css('background', '#108ADA');
                        refresh.css('color', '#fff');
                        refresh.html('获取验证码');
                        isTimer = false;
                        window.clearInterval(i);
                    }
                }, 1000)
            }
        });

    </script>
@endsection
